<template>
  <div class="home-container">
    <search-bar></search-bar>

    <van-swipe
      class="swiper-container"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item v-for="item in sliders" :key="item.categoryId"
        ><img :src="item.imgUrl" alt=""
      /></van-swipe-item>
    </van-swipe>

    <tab-bar></tab-bar>
    <category></category>
    <floor></floor>
  </div>
</template>

<script>
import TabBar from "@/components/tabBar.vue";
// import Carousel from "./carousel.vue";
import Category from "./category.vue";
import Floor from "./floor.vue";
import SearchBar from "./searchBar.vue";
import { getSliders } from "../../api/api";
export default {
  data() {
    return {
      sliders: [],
    };
  },
  created() {
    // 回调函数返回的请求数据
    getSliders((res) => {
      // console.log(res);
      this.sliders = res.data;
    });
  },
  components: {
    TabBar,
    // Carousel,
    Category,
    Floor,
    SearchBar,
  },
};
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  overflow: hidden;

  img {
    width: 750px;
    height: 366px;
  }
}


// .my-swipe {
//   color: #fff;
//   font-size: 20px;
//   text-align: center;

//   img {
//     width: 750px;
//     height: 366px;
//   }
// }
</style>